Ext.onReady(function(){

	//底部工具条
	var bbar = new Ext.Toolbar([{
			xtype : 'label',
			text : '文本'
		}, {
			xtype : 'textfield',
			width : 100,
			value : '编辑框'
		}, {
			xtype : 'checkbox',
			boxLabel : '选择框'
		}, {
			xtype : 'button',
			text : '第一个',
			handler : function(btn){
				alert(btn.text);
			}
		}, {
			id : 'preBtn',
			text : '上一个',
			handler : function(btn){
				alert(btn.id);
			}
		}, {
			id : 'nextBtn',
			text : '下一个',
			handler : function(){
				alert(Ext.getCmp('nextBtn').text);
			}
		}, {
			text : '最后一个'
		}]);
	
	//新建一个Panel组件，并且配置该面板	
	var panel = new Ext.Panel({
//		renderTo : Ext.getBody(),
//		renderTo : 'myPanel',
		title : '我的第一个面板',
		width : 900,//面板宽度
		height : 750,//面板高度
		frame : false,
		border : false,
		
		layout : 'border',//指定布局管理器
		
		tbar : [{//顶部工具条
			text : '增加'
			
		}, {
			text : '删除'
		}, {
			text : '修改'
		}, {
			text : '查询'
		}],
		
		items : [//配置面板的items
		new Ext.Panel({
			region : 'north',
			title : '北部面板',
			width : 900,
			height : 200,
			frame : true,
			border : true
		}), {
			region : 'south',
			title : '南部面板',
			width : 900,
			height : 200,
			frame : true,
			border : true
		}, {
			region : 'west',
			title : '西部面板',
			width : 300,
			height : 200,
			frame : true,
			border : true
		}, {
			region : 'east',
			title : '东部面板',
			width : 300,
			height : 200,
			frame : true,
			border : true
		}, {
			region : 'center',
			title : '中部面板',
			width : 300,
			height : 200,
			frame : true,
			border : true
		}],
		
		bbar : bbar,//底部工具条
		
		buttonAlign : 'center',//指定按钮排列方式，还可以是 left,right
		buttons : [new Ext.Button({//配置按钮组
			text : '确定'
		}), {
			text : '关闭'
		}]
	});
	
	panel.render('myPanel');//渲染panel
	
});